templates/pages/azhtwo.html.twig line 1

Open in your IDE?
  1. {% extends "base.html.twig" %}
  3. {% block content %}
  4.     {% if webspaceSettings is defined %}
  5.         {{ include('@components/sub-navigation.html.twig') }}
  6.     {% endif %}
  7.     {{ include('@components/image-text-section.html.twig', {
  8.         image: content.teaserImage.url,
  9.         text: content.teaserText|raw,
  10.         order: {
  11.             text: '1',
  12.             image: '2'
  13.         }
  14.     }) }}
  15.     <div class="container my-5">
  16.         <div class="row gy-5 g-xl-0">
  17.             {% for icon in content.iconDetails %}
  18.                 <div class="col-12 col-sm-6 col-lg">
  19.                     {{ include('@components/icon-text.html.twig', {
  20.                         icon: icon.iconImage.url,
  21.                         text: icon.iconText
  22.                     }) }}
  23.                 </div>
  24.             {% endfor %}
  25.         </div>
  26.     </div>
  27.     {{ include('@components/text-yellow-circle-section.html.twig', {
  28.         text: content.yellowCircleSectionText,
  29.         buttonsText: content.yellowCircleSectionText1,
  30.         link: {
  31.             text: content.yellowCircleSectionButtonText1,
  32.             link: content.yellowCircleSectionButtonUrl1,
  33.         },
  34.         button: {
  35.             text: content.yellowCircleSectionButtonText,
  36.             link: content.yellowCircleSectionButtonUrl,
  37.         }
  38.     }) }}
  39.     {{ include('@components/we-consult-you-slider.html.twig', {
  40.         title: content.consultingTitle,
  41.         text: content.consultingText,
  42.         items: content.consulting,
  43.     }) }}
  44.     {% if content.youtubeVideo is not empty %}
  45.     <div class="bg-neutral-grey py-5">
  46.         <div class="container">
  47.             <div class="row">
  48.                 <div class="col-12 mb-5">
  49.                     <h2 class="point light">{{ content.videoTitle }}</h2>
  50.                 </div>
  51.                 <div class="col-12 d-flex justify-content-center">
  52.                     <iframe class="youtube-video-iframe" width="80%" height="600" src="{{ content.youtubeVideo }}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  53.                 </div>
  54.             </div>
  55.         </div>
  56.     </div>
  57.     {% endif %}
  58.     <div class="bg-rock-blue py-5 icons">
  59.         <div class="container">
  60.             <div class="row">
  61.                 <div class="col-12">
  62.                     <div class="text-lg noto-sans-bold mb-5">Lohnt sich das? Rechnen Sie selbst</div>
  63.                     <p>Mit dem Schieberegler geben Sie Ihren durchschnittlichen Monatsumsatz an und ermitteln ganz einfach Ihre Zeitersparnis und die Ihnen entstehenden Abrechnungsgebühren bei der AZH:</p>
  65.                     <div class="row mt-5">
  66.                         <div class="col-12 col-lg-5">
  67.                             <div class="mb-2">Ihr Umsatz pro Monat:</div>
  68.                             <div class="text-sm noto-sans-bold">
  69.                                 <span class="sliderValue">0</span> <span>€</span>
  70.                             </div>
  71.                             Monatsumsatz<br/>
  72.                             <div class="counterInvoices text-sm noto-sans-bold">0</div>
  73.                             Gestellte <span class="invoiceText">Rechnung</span> (bei 250€ Rechnungswert)
  74.                         </div>
  75.                         <div class="col-12 col-lg-7">
  76.                             <div class="d-flex align-items-center flex-column flex-lg-row justify-content-start justify-content-lg-end flex-lg-row mt-5 mt-lg-0">
  77.                                 <div style="min-width: 280px" class="d-flex flex-column align-items-center me-lg-4 mb-4 mb-lg-0">
  78.                                     <img class="mb-3" src="{{ asset('build/website/images/Vorteilsrechner_Uhr.svg') }}">
  79.                                     <div class="noto-sans-bold">
  80.                                         <span>Ihre Zeitersparnis:</span>
  81.                                         <span class="invoiceTime">0</span>
  82.                                         <span>Stunden</span>
  83.                                     </div>
  84.                                 </div>
  85.                                 <div class="noto-sans-bold">
  86.                                     <div class="position-relative">
  87.                                         <i class="position-absolute left-0 fa-solid fa-check me-2"></i>
  88.                                         <div class="ps-4">Höherer Rechnungsertrag</div>
  89.                                     </div>
  90.                                     <div class="position-relative">
  91.                                         <i class="position-absolute left-0 fa-solid fa-check me-2"></i>
  92.                                         <div class="ps-4">weniger Zahlungsverzug durch Beanstandungen</div>
  93.                                     </div>
  94.                                     <div class="position-relative">
  95.                                         <i class="position-absolute left-0 fa-solid fa-check me-2"></i>
  96.                                         <div class="ps-4">Klärung, Mahnung, Buchführung inklusive</div>
  97.                                     </div>
  98.                                 </div>
  99.                             </div>
  100.                         </div>
  101.                     </div>
  103.                     <div class="row d-flex justify-content-md-center mt-5 mb-3">
  104.                         <div class="col-12 col-lg-5">
  105.                             <div class="text-sm noto-sans-bold mb-3">Umsatz pro Monat</div>
  106.                             <input id="slider" type="range" min="250" max="7750" value="250" step="250" list="tickmarks">
  107.                             <datalist id="tickmarks">
  108.                                 <option value="250">250€</option>
  109.                                 <option value="5000">4.000€</option>
  110.                                 <option value="10000">7.750€</option>
  111.                             </datalist>
  112.                         </div>
  113.                     </div>
  114.                     <div class="row mt-5">
  115.                         <div class="col-12">
  116.                             {% embed '@components/accordion/single.html.twig'
  117.                                 with {
  118.                                     'color': 'rock-blue',
  119.                                     'title': 'Und so errechnen sich die oben aufgeführten Werte:',
  120.                                     'accordionId': 'Und so errechnen sich die oben aufgeführten Werte'|slug
  121.                                 }
  122.                             %}
  123.                                 {% block accordion_body %}
  124.                                     <div class="row">
  125.                                         <div class="col-12">
  126.                                             Bei eigener Abrechnung inkl. der Klärung von Rückfragen, Mahnwesen und Buchführung benötigen Sie im Durchschnitt wenigstens 26 Minuten Zeit pro Vorgang für alle Arbeitsschritte:
  127.                                         </div>
  128.                                     </div>
  129.                                     <br/>
  130.                                     <div class="row d-flex justify-content-between text-center">
  131.                                         <div class="col-12 col-md-6 mb-5 mb-lg-0 col-lg-3 d-flex flex-column align-items-center">
  132.                                             <img class="mb-4" src="{{ asset('build/website/images/Vorteilsrechner_Rechnungsstellung.svg') }}">
  133.                                             <div class="text-sm noto-sans-bold">Rechnungsstellung</div>
  134.                                         </div>
  135.                                         <div class="col-12 col-md-6 mb-5 mb-lg-0 col-lg-3 d-flex flex-column align-items-center">
  136.                                             <img class="mb-4" src="{{ asset('build/website/images/Vorteilsrechner_Finanzbuchhaltung.svg') }}">
  137.                                             <div class="text-sm noto-sans-bold">Zahlungsverkehr</div>
  138.                                         </div>
  139.                                         <div class="col-12 col-md-6 mb-5 mb-lg-0 col-lg-3 d-flex flex-column align-items-center">
  140.                                             <img class="mb-4" src="{{ asset('build/website/images/Vorteilsrechner_Mahnwesen.svg') }}">
  141.                                             <div class="text-sm noto-sans-bold">Mahnwesen</div>
  142.                                         </div>
  143.                                         <div class="col-12 col-md-6 mb-5 mb-lg-0 col-lg-3 d-flex flex-column align-items-center">
  144.                                             <img class="mb-4" src="{{ asset('build/website/images/Vorteilsrechner_Monierungen.svg') }}">
  145.                                             <div class="text-sm noto-sans-bold">Rückfragen und Monierungen</div>
  146.                                         </div>
  147.                                     </div>
  148.                                     <br/>
  149.                                     <div class="row">
  150.                                         <div class="col-12">
  151.                                             Bei <span class="counterInvoices">0</span> <span class="invoiceText">Rechnung</span> im Monat sind das in Summe <span class="invoiceTime">0</span> Stunden Arbeitszeit.<br/>
  152.                                             Wenn Sie "Abrechnung Komfort" nutzen, sparen Sie diese Zeit
  153.                                         </div>
  154.                                     </div>
  155.                                     <br/>
  156.                                     <div class="row">
  157.                                         <div class="col-12">
  158.                                             <img src="{{ asset('build/website/images/Vorteilsrechner_Uhr.svg') }}"><span class="noto-sans-bold"><span class="ms-3 invoiceTime">0</span> <span>h Zeitersparnis</span></span>
  159.                                         </div>
  160.                                     </div>
  161.                                     <br/>
  162.                                     <div class="row">
  163.                                         <div class="col-12">
  164.                                             Bei <span class="counterInvoices">0</span> <span class="invoiceText">Rechnung</span> bezahlen Sie für Abrechnung Komfort <span class="feeNetto">0</span> €* (d.h. <span class="feeBrutto">0</span> € brutto abzüglich Steuerersparnis).
  165.                                             Dafür sparen Sie <span class="invoiceTime">0</span> Stunden Büroarbeit. Die Nettogebühr der AZH entspricht dem Erlös aus <span class="postpartum">0</span> Wochenbettbesuchen
  166.                                             (Berechnung: Erlös 1 WB-Besuch = 40,38 €)
  167.                                         </div>
  168.                                     </div>
  169.                                     <br/>
  170.                                     <div class="row">
  171.                                         <div class="col-12">
  172.                                             <p style="font-size: 0.75rem">
  173.                                             * Die AZH-Gebühren können Sie als Betriebsausgaben von der Steuer absetzen.
  174.                                             Die persönliche Steuerersparnis ist individuell. Bei der Berechnung gehen wir beispielhaft
  175.                                             von einem durchschnittlichen Steuersatz von 40% aus. D.h., die effektiven Kosten (netto) betragen 60% vom Rechnungsbetrag.
  176.                                             </p>
  177.                                         </div>
  178.                                     </div>
  179.                                 {% endblock %}
  180.                             {% endembed %}
  181.                         </div>
  182.                     </div>
  183.                 </div>
  184.             </div>
  185.         </div>
  186.     </div>
  187.     <div class="container mt-5">
  188.         <div class="row">
  189.             <div class="col-12">
  190.                 {{ content.onlyText1|raw }}
  191.             </div>
  192.         </div>
  193.     </div>
  194.     {{ include('@components/image-text-section.html.twig', {
  195.         image: content.teaserImage1.url,
  196.         text: content.teaserText1|raw,
  197.         order: {
  198.             text: '1',
  199.             image: '2'
  200.         },
  201.         link: {
  202.             withIcon: true,
  203.             text: content.teaserUrlTitle1,
  204.             link: content.teaserUrl1
  205.         }
  206.     }) }}
  207.     {{ include('@components/image-text-two-links-section.html.twig', {
  208.         image: content.textImageButtonsImage.url|default('/website/images/placeholder-image.png'),
  209.         text: content.textImageButtonsText,
  210.         order: {
  211.             text: '2',
  212.             image: '1'
  213.         },
  214.         link: {
  215.             text: content.textImageButtonsUrlText,
  216.             link: content.textImageButtonsUrl,
  217.         },
  218.         button: {
  219.             text: content.textImageButtonsUrlText1,
  220.             link: content.textImageButtonsUrl1,
  221.         }
  222.     }) }}
  223.     <div class="container mb-5">
  224.         <div class="row mt-4">
  225.             <div class="col-12">
  226.                 <span class="small-printed">{{ content.smallPrint|raw }}</span>
  227.             </div>
  228.         </div>
  229.     </div>
  230.     {{ include('@components/image-text-section.html.twig', {
  231.         image: content.teaserImage2.url,
  232.         text: content.teaserText2|raw,
  233.         imageIsIcon: true,
  234.         order: {
  235.             text: '1',
  236.             image: '2'
  237.         },
  238.         link: {
  239.             withIcon: true,
  240.             text: content.teaserUrlTitle2,
  241.             link: content.teaserUrl2
  242.         }
  243.     }) }}
  244.     <div class="container my-5">
  245.         <div class="row">
  246.             <div class="col-12">
  247.                 <h2 class="point light">{{ content.partsTitle }}</h2>
  248.             </div>
  249.         </div>
  250.     </div>
  251.     <div class="container my-5" id="heb-office">
  252.         <div class="row">
  253.             <div class="col-12">
  254.                 {{ include('@components/accordion.html.twig', {
  255.                     accordionId: content.partsTitle|slug,
  256.                     items: content.partsDetails
  257.                 }) }}
  258.             </div>
  259.         </div>
  260.     </div>
  261.     {% if content.buttonLink %}
  262.     <div class="container">
  263.         <div class="row">
  264.             <div class="col-12">
  265.                 {{ include('@components/button.html.twig', {
  266.                     text: content.buttonText,
  267.                     link: {
  268.                         href: content.buttonLink
  269.                     }
  270.                 }) }}
  271.             </div>
  272.         </div>
  273.     </div>
  274.     {% endif %}
  275.     {{ include('@components/table-section.html.twig', {
  276.         table: content.tabel,
  277.     }) }}
  278.     <div class="container">
  279.         <div class="row">
  280.             <div class="col-12">
  281.                 <span class="small-printed">{{ content.smallPrint1 }}</span>
  282.             </div>
  283.         </div>
  284.     </div>
  285.     {{ include('@components/rely-on-us-section.html.twig', {
  286.         title: content.relyTitle,
  287.         items: content.relyDetails,
  288.     }) }}
  289.     <div class="container my-5">
  290.         <div class="row">
  291.             <div class="col-12">
  292.                 <h2 class="point light">{{ content.partsTitle1 }}</h2>
  293.             </div>
  294.             <div class="col-12">
  295.                 {{ include('@components/accordion.html.twig', {
  296.                     accordionId: content.partsTitle1|slug,
  297.                     items: content.partsDetails1
  298.                 }) }}
  299.             </div>
  300.         </div>
  301.     </div>
  302.     {{ include('@components/contact-box.html.twig') }}
  303.     {{ include('@components/interests-slider.html.twig') }}
  304. {% endblock %}
  306. {% block custom_javascripts %}
  307.     {{ encore_entry_script_tags('accounting-slider') }}
  308. {% endblock %}